<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./考试题.css">
    <script src="/jquery.js"></script>
    <!-- <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.css">
    <script src="../bootstrap-3.4.1/dist/js/bootstrap.js"></script> -->
    <!-- echarts -->
    <script src="/四段/echarts/echarts.js"></script>

    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: 'f201861d565e62bf627ac7bc797fbb10',
        }
    </script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=d70cc4ab1718d09ff105699312120a22&plugin=AMap.ToolBar,AMap.Driving"></script>
</head>

<body>
    <!-- <div id="cover"></div> -->
    <!-- 大盒子 -->
    <div class="content">
        <!-- 大盒子里面的第一行 -->
        <div class="firstLine">
            <div class="noe">
                <!-- 个人信息 -->
                <div class="login">
                    <!-- 个人信息上面的内容 -->
                    <div class="login1">
                        <img src="/img/5.jpg" alt="">
                        <div class="login2">
                            <h3>admin</h3>
                            <span>超级管理员</span>
                        </div>
                    </div>
                    <!-- 个人信息下面的内容 -->
                    <div class="loginx">
                        <p>上次登录时间：<span id="time"></span></p>
                        <p>上次登录地点：<span id="place">郑州</span></p>
                    </div>
                </div>
                <!-- 大盒子第一行左边的下半部分 -->
                <div class="oneunder">
                    <h4>语言详情</h4>
                    <hr>
                    <div id="div1"></div>
                </div>
            </div>
            <!-- 大盒子第一行的右边上 -->
            <div class="oneright">
                <div class="noerightone">
                    <div class="noerightone1 num">
                        <img src="./images/name.jpg" alt="">
                        <h1 class="num1"></h1>
                        <span class="num1_1"></span>
                    </div>
                    <div class="noerightone2 num">
                        <img src="./images/lingdang.jpg" alt="">
                        <h1 class="num2"></h1>
                        <span class="num1_2"></span>
                    </div>
                    <div class="noerightone3 num">
                        <img src="./images/gouwubao.jpg" alt="">
                        <h1 class="num3"></h1>
                        <span class="num1_3"></span>
                    </div>
                </div>
                <!-- 大盒子第一行的右边下 -->
                <div class="noerighxia">
                    <div class="noerightxiatitle">
                        <h4>待办事项</h4>
                        <a href="#" id="saver">添加</a>
                    </div>
                    <hr>
                    <div id="nav">
                        <ul></ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 大盒子里面的第二行 -->
        <div id="gaud"></div>
        <div id="linear"></div>
    </div>

    </div>
    <!-- <div id="main">
        <input type="text" placeholder="添加的内容" id="inp">
        <button id="save">发布</button>
        <button id="guanbi">关闭</button>
    </div> -->
</body>
<script>
    var lisis = []
    $(function () {

        // $('#saver').click(function () {
        //     $('#main').show()
        //     $('#cover').show()
        // })
        // $('#guanbi').click(function () {
        //     $('#main').hide()
        //     $('#cover').hide()
        // })
        // 添加时间
        function timeList() {
            var time = new Date()
            var n = time.getFullYear()      // 年
            var y = time.getMonth() + 1     // 月
            var r = time.getDate()          // 日
            var s = time.getHours()         // 时
            var f = time.getMinutes()       // 分
            var m = time.getSeconds()       // 秒
            $('#time').html(`${n},${y},${r},${s}：${f}：${m}`)
        }
        $('#time').html(timeList())
    })

    // 进度条
    $.ajax({
        url: 'http://47.94.4.201/index.php/index/admin/getNum',
        method: 'GET',
        dataType: 'json',
        success: function (e) {
            // console.log(e);
            var str = `
                    <p class='p5'>Vue</p>
                    <div class="oneunder1">
                        <p class="p1"></p>
                        <span class="span1">${e.data.vuenum + '%'}</span>
                    </div>
                    <p class='p5'>JavaScript</p>
                    <div class="oneunder1">
                        <p class="p2"></p>
                        <span class="span2">${e.data.jsnum + '%'}</span>
                    </div>
                    <p class='p5'>css</p>
                    <div class="oneunder1">
                        <p class="p3"></p>
                        <span class="span3">${e.data.cssnum + '%'}</span>
                    </div>
                    <p class='p5'>html</p>
                    <div class="oneunder1">
                        <p class="p4"></p>
                        <span class="span4">${e.data.htmlnum + '%'}</span>
                    </div>`
            $('#div1').html(str)
        }
    })


    // 右侧数量
    $.ajax({
        url: 'http://47.94.4.201/index.php/index/admin/getNolist',
        method: 'GET',
        dataType: 'json',
        success: function (e) {
            // console.log(e);
            lisis.push(e.data)
            // 用户访问数量
            var user = e.data[0].num
            var user1 = e.data[0].str
            $('.num1').html(user)
            $('.num1_1').html(user1)
            // 系统信息
            var system = e.data[1].num
            var system1 = e.data[1].str
            $('.num2').html(system)
            $('.num1_2').html(system1)
            // 数量
            var quantity = e.data[2].num
            var quantity1 = e.data[2].str
            $('.num3').html(quantity)
            $('.num1_3').html(quantity1)
        }
    })
  
    
    // 待办事项
    $.ajax({
        url: 'http://47.94.4.201/index.php/index/admin/getTolist',
        method: 'GET',
        dataType: 'json',
        success: function (e) {
            // console.log(e);
            // lisis.push(e.data)
            var str = ''
            for (let i in e.data) {
                str += `<li class='ff'><input type="checkbox" onclick='delLine(${i})'>${e.data[i]}</li>`
            }
            $('#nav ul').html(str)

        }
    })
    // 删除线
    var dd = 0
    function delLine(index){
        if (dd == 0) {
            $('.ff')[index].style = 'text-decoration:line-through;color:#999'
            dd = 1
            console.log(666);
        } else if (dd == 1) {
            $('.ff')[index].style = 'text-decoration:none;color: black'
            dd = 0
            console.log(888);
        }
    }
    // 高德地图
    var map = new AMap.Map('gaud', {
        resizeEnable: true,
        center: [113.428155, 34.774258],
        zoom: 13
    });
    // 标记点
    var marker = new AMap.Marker({
        position: map.getCenter(),
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        anchor: 'bottom-center',
        offset: new AMap.Pixel(0, 0)
    });

    marker.setMap(map);

    // 设置鼠标划过点标记显示的文字提示
    marker.setTitle('吾悦广场');

    
    // 柱状图
    var myChart = echarts.init(document.getElementById('linear'))
    option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '家电', '百货', '食品'],
                ['一月', 234, 164, 74,],
                ['二月', 278, 178, 115],
                ['三月', 270, 150, 200],
                ['四月', 190, 135, 235],
                ['五月', 230, 160, 90],
            ]
        },
        xAxis: { type: 'category' },
        yAxis: {},

        series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }]
    };
    myChart.setOption(option)
</script>

</html>